<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul li{
            list-style: none;
        }
        .ad{
            margin: 0 auto;
            width: 440px;
            height: 320px; 
            position: relative;
            /* border: 1px solid red; */
            overflow: hidden;
        }
        .imgList{
            overflow: auto;
            position: absolute;
            z-index: 1;
        }
        .imgList img{
            width: 440px;
            height: 320px;        
            float: left;    

        }
        ul{
            position: absolute;
            top: 20px;
            right: 100px;
            z-index: 2;
        }
        li{
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 10px;
            margin-left: 10px;
            text-indent: -9999px;
            float: left;
        }
        .active{
            background-color: sandybrown;
        }
        .left{
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 3;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            height: 46px;
            width: 40px;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }
        .right{
            position: absolute;
            top: 50%;
            right: 0;
            z-index: 3;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            height: 46px;
            width: 40px;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }
        
    </style>
</head>
<body>
    <div class="ad">
        <div class="imgList">
            <img src="../img/d.jpg" alt="">
            <img src="../img/e.jpg" alt="">
            <img src="../img/f.jpg" alt="">
            <img src="../img/g.jpg" alt="">
        </div>
        <ul>
        </ul>
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </div>
    <!-- 引入封装好的动画 -->
    <script src="20.animate.js"></script>  
    <script>
        window.addEventListener('load',function(){
            var ad=document.querySelector(".ad")   
            var imglist=document.querySelector(".ad>div")
            var boxWidth=ad.offsetWidth;   //获取大盒子的宽度
            var imgAll=imglist.children    //获取盒子中所有的子元素(img)
            var ul=document.querySelector("ul")
            // var isAnimate=false //做一个全局的标记，用来记录轮播是否正在播放，如果播放为true，没有播放为false
            var dataID=0
            var firstImg=imgAll[0].cloneNode(true)
            imglist.appendChild(firstImg)
            imglist.style.width=boxWidth*imgAll.length+'px'   //动态设置宽度：盒子所有子元素(img)的长度乘以盒子的宽度

        
            for(var i=0;i<imgAll.length-1;i++)
            {
                var li=document.createElement("li")  //动态创建li标签
                if(i==0) li.className='active' //第一个为选中颜色
                li.innerText=i   //设置内容
                li.setAttribute('data-id',i) //设置li的属性
                ul.appendChild(li) //添加到ul里面
            }
            ul.addEventListener('click',function(e){  //事件委托  事件者为li
                var e=e||window.event;  //事件兼容
                if(e.target.tagName=='LI')  //确认点击的是否为li标签
                {
                    // if(isAnimate) //如果我们轮播还在播放，不进行这次点击播放
                    // {
                    //     return 
                    // }
                    // isAnimate=true  //如果没有播放，就设置为播放，后面的animate就可以播放了
                    var liAll=this.children  //因为这里的this是ul，所以获取ul.的所有子元素
                    for(var j=0;j<liAll.length;j++)  //用排他思想
                    {
                        liAll[j].className=''//所有的li的class为空
                    }
                    e.target.setAttribute('class','active')   //是的话就添加属性  类名 添加颜色
                var dataID=e.target.getAttribute("data-id")
                var moveLength=dataID*boxWidth  //计算出当前元素需要移动的距离是他的当前下标乘以盒子的宽度
                    animate(imglist,-moveLength,20,function(){
                        // isAnimate=false
                    })  //图片往左边移动 所以moveLength为负数
                console.log(dataID);
                }
                
            });
            var left=document.querySelector(".left")
            var right=document.querySelector(".right")
            right.onclick=function()
            {  
                if(dataID==0)
                    {
                        imglist.style.left='0px'
                    }
                dataID++
                if(dataID==imgAll.length-1) dataID=0
                var moveLength=dataID*boxWidth
                changePoint()
            
                animate(imglist,-moveLength,20,function(){
                   
                })
            }
            left.onclick=function()
            {
                if(dataID<=0) //是否等于第一张
                {
                    dataID=imgAll.length-1  //那就滑动到最后一张
                    imglist.style.left=-dataID*boxWidth+'px'
                }
                dataID--
                var moveLength=dataID*boxWidth
                changePoint()
                animate(imglist,-moveLength,20)
            }

            function changePoint()
            {
                var liAll=ul.children;
                for(var i=0;i<liAll.length;i++)
                {
                    liAll[i].className=''
                }
                liAll[dataID].className='active'
            }
            var autoID=setInterval(function(){
                right.click()

            },2000)
            ad.addEventListener('mouseover',function(){
                clearInterval(autoID)
            })
            ad.addEventListener('mouseout',function(){
                autoID=setInterval(function(){
                    right.click()
                },2000)
            })


        })
      

    </script>

    
</body>
</html>